<template>
  <yd-layout class="m-reset">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="修改密码" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <div class="m-reset-ct">
      <yd-cell-group>
        <yd-cell-item>
          <yd-input slot="right"
            type="password" 
            v-model="curPsd"
            placeholder="请输入当前密码"
            :required="true"
            regex="^\w{6,16}$"
            ref="psdInput"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <yd-input slot="right"
            type="password" 
            v-model="newPsd" 
            placeholder="请输入新密码"
            :required="true"
            regex="^\w{6,16}$"
            ref="psdInput"
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
      </yd-cell-group>

      <yd-button-group>
        <yd-button size="large" @click.native="onSubmit">提交</yd-button>
      </yd-button-group>
    </div>
  </yd-layout>
</template>

<script>
  import { apiResetPsd } from 'js/api'
  import Md5 from 'js-md5'

  export default {
    data() {
      return {
        curPsd: '',
        newPsd: ''
      }
    },
    methods: {
      onSubmit() {
        const oInput = this.$refs.psdInput
        if (oInput.errorMsg) {
          this.$toast(oInput.errorMsg)
          return
        }
        // 成功
        apiResetPsd(Md5(this.curPsd), Md5(this.newPsd), this.$store.getters.token).then(data => {
          this.$toast('密码修改成功，请重新登录', () => {
            this.$router.push('/login')
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .m-reset-ct {
    height: 100%;
    background: #fff;
  }
</style>